<template>
  <section>
    <div class="content-title">{{ title }}</div>
    <div class="item">
      <div v-for="(x, y) in list" :key="y" @click="showItem(x)">
        <div :class="x.status == 1 ? 'active' : ''">
          <div :class="'iconfont icon-' + x.icon"></div>
          {{ x.title }}
        </div>
      </div>
      <el-dialog title="项目详情" v-model="isMessage" width="800px" draggable>
        <el-descriptions title="" :column="2" border>
          <template v-for="(x, y) in searchColumns" :key="y">
            <el-descriptions-item v-if="x.name == 'icon'" :label="x.title" align="center">
              <span :class="'iconfont icon-' + detail.icon"></span>
            </el-descriptions-item>
            <el-descriptions-item v-else-if="x.name == 'status'" :label="x.title" align="center">
              {{ detail.status == 1 ? '启用' : '弃用' }}
            </el-descriptions-item>
            <el-descriptions-item v-else-if="x.name == 'type'" :label="x.title" align="center">
              <span v-if="detail.type == 0">个人</span>
              <span v-else-if="detail.type == 1">公司</span>
              <span v-else>测试</span>
            </el-descriptions-item>
            <el-descriptions-item v-else-if="x.name == 'color'" :label="x.title" align="center">
              <div :style="{ width: '20px', height: '20px', background: detail.color, margin: '0 auto' }"></div>
            </el-descriptions-item>
            <el-descriptions-item v-else-if="x.name == 'online'" :label="x.title" align="center">
              {{ detail.online }}
              <el-button @click="goStart(detail.online)" style="margin-left: 10px;">打开</el-button>
            </el-descriptions-item>
            <el-descriptions-item v-else-if="x.name == 'path'" :label="x.title" align="center">
              {{ detail.path }}
              <el-button @click="goStart(detail.path)" style="margin-left: 10px;">打开</el-button>
            </el-descriptions-item>
            <el-descriptions-item v-else-if="x.name == 'start'" :label="x.title" align="center">
              {{ detail.start }}
              <el-button @click="goStart(detail.start)" style="margin-left: 10px;">启动</el-button>
            </el-descriptions-item>
            <el-descriptions-item v-else :label="x.title" align="center">
              <div class="descriptions-content ellipsis">
                {{ detail[x.name] }}
              </div>
            </el-descriptions-item>
          </template>
        </el-descriptions>
        <el-descriptions title="" :column="3" border style="margin-top: 5px;">
          <el-descriptions-item label="id" align="center">
            {{ detail.id }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间" align="center">
            {{ detail.create_time }}
          </el-descriptions-item>
          <el-descriptions-item label="修改时间" align="center">
            {{ detail.update_time }}
          </el-descriptions-item>
        </el-descriptions>
      </el-dialog>
    </div>
  </section>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { getColumnList, queryData } from '@/apis/mysql'
import global from '@/utils/global';
import system from '@/utils/system';
const list = ref([])
const isMessage = ref(false)
const searchColumns = ref([])
const detail = ref(null)
const props = defineProps({
  title: {
    type: String,
    defalut: ''
  }
})
onMounted(() => {
  getItems()
})
// 获取项目
const getItems = () => {
  queryData({
    table: 'items',
    data: {
      type: 2
    },
    query: {
      page: 1,
      show: 100
    }
  }).then(res => {
    list.value = global.reSort(res.data, 'sort')
    // // console.log(res)
  })
}
const showItem = (row) => {
  getColumnList('items').then(res => {
    searchColumns.value = global.reSort(res.data, 'sort')
    isMessage.value = true
    detail.value = row
  })
}

const goStart = (start) => {
  if (start.includes('.bat')) {
    system.openFile(start)
  } else {
    system.openWeb(start)
  }
}
</script>
<style scoped lang="scss">
.item {
  display: flex;
  flex-wrap: wrap;

  >div {
    width: 30%;
    height: 80px;
    border: 1px solid #fff;
    margin: 5px;
    padding: 5px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 5px;

    >div {
      color: #666;
    }
  }

  .active {
    color: #14d357;
  }
}
</style>
